<script>
  import { moment } from 'istrong-timeutil';
  import { get } from 'istrong-axiosmodel';
  import setLoading from '../../libs/loading';

  import vgMap from './Map.vue';
  import vgList from '../../components/ListPage.vue';


  export default {
    name: 'flowMain',
    components: {
      'vg-Map': vgMap,
      'vg-List': vgList
    },
    data() {
      return {
        beginTime: '',
        endTime: '',
        showType: 'list',
        positionMarkerId: '',
        data: [],
        listFields: [
          {
            fieldLabel: '站名',
            fieldName: 'name',
            fieldType: 'String',
            headerClass: 'listViewer-col-stationName listViewer-col-stationName-flow',
            contentClass: 'listViewer-col-stationName listViewer-col-stationName-flow'
          },
          {
            fieldLabel: '水位<span class="listViewer-header-unit">(m)</span>',
            fieldName: 'val',
            fieldType: 'Number',
            fixed: 2,
            defaultLabel: '-',
            headerClass: 'listViewer-col-val listViewer-col-val-flow listViewer-col-val-flow-water',
            contentClass: 'listViewer-col-val listViewer-col-val-flow listViewer-col-val-flow-water'
          },
          {
            fieldLabel: '入库<span class="listViewer-header-unit">(m³/s)</span>',
            fieldName: 'in_val',
            fieldType: 'Number',
            fixed: 2,
            defaultLabel: '-',
            headerClass: 'listViewer-col-val listViewer-col-val-flow',
            contentClass: 'listViewer-col-val listViewer-col-val-flow'
          },
          {
            fieldLabel: '出库<span class="listViewer-header-unit">(m³/s)</span>',
            fieldName: 'out_val',
            fieldType: 'Number',
            fixed: 2,
            defaultLabel: '-',
            headerClass: 'listViewer-col-val listViewer-col-val-flow listViewer-col-val-flow-outval',
            contentClass: 'listViewer-col-val listViewer-col-val-flow listViewer-col-val-flow-outval'
          }
        ],
        loading: false
      }
    },
    watch: {
      loading(val) {
        setLoading(val);
      }
    },
    mounted() {
      this.getFlowData();
    },
    methods: {
      getFlowData() {
        this.loading = true;
        get('flow.flow', {
          flow: {
            time: ['[', this.beginTime, ',', this.endTime, ']'].join('')
          }
        }).then(result => {
          this.data = result.data;
          this.loading = false;
        });
      },
      onShowChartInfo(data) {
        this.$router.push({
          name: 'flow/chart',
          query: {
            id: data.id,
            name: data.name,
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        });
      },
      onChangeShowType(type) {
        this.showType = type;
      },
      onPositionEnd() {
        this.positionMarkerId = '';
      }
    },
    created() {
      this.beginTime = parseInt(moment().format('H'), 10) >= 12 ?
        moment().format('YYYY-MM-DDT06:00:00') :
        moment().add('days', -1).format('YYYY-MM-DDT06:00:00');
      this.endTime = moment().format('YYYY-MM-DDTHH:mm:ss');

      let moduleConfig = this.$AppConfig.module;
      if (moduleConfig && moduleConfig.flow) {
        this.showType = moduleConfig.flow.defaultContent || 'list';
      }
    },
    beforeDestroy() {
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 通过 `vm` 访问组件实例
        if (from.path === '/flow/chart' && to.params.showType) {
          vm.showType = to.params.showType;
          vm.positionMarkerId = to.params.id;
        }
      });
    }
  }
</script>
<template>
  <div class="pageMain">
    <keep-alive>
      <vg-Map :positionMarker="positionMarkerId" :beginTime="beginTime" :endTime="endTime" :data="data" @changeShowType="onChangeShowType"
        @showChartInfo="onShowChartInfo" @positionEnd="onPositionEnd" v-if="showType !== 'list'"></vg-Map>
      <vg-List :beginTime="beginTime" :endTime="endTime" :data="data" :fields="listFields" @changeShowType="onChangeShowType" @showChartInfo="onShowChartInfo"
        :existFilter="false" v-if="showType === 'list'"></vg-List>
    </keep-alive>
  </div>
</template>
<style>
.listViewer-col-val-flow{
  min-width: 72px;
  width: 22%;
  text-align: right;
  padding-right: 5px!important;
}
.listViewer-col-val-flow-water{
  min-width: 62px;
  width: 19%;
}
.listViewer-col-val-flow-outval{
  width: 20%;
  padding-right: 15px!important;
}
.listViewer-col-stationName-flow{
  width: 24%;
}
</style>